<template>
  <div class="lastProfits">
    <div class="details">
      <el-table
        :data="tableData"
        style="width: 100%"
        class="table">
        <!-- 昨日节点年化收益 -->
        <el-table-column
          prop="node"
          :label="$t('newpos.nodeYearBenefits')">
        </el-table-column>
        <!-- 昨日REX年化收益 -->
        <el-table-column
          prop="rex"
          :label="$t('newpos.rexYearEarnings')">
        </el-table-column>
      </el-table>
    </div>
    <div class="tip" v-if="!ismax">
      <p class="mb5 color333">{{ $t('newpos.whyHigh') }}</p>
      <p style="padding-left: 9px;">
        <span>{{ $t('newpos.specificReason') }}</span>
        <a :href="handleToDetails()" target="_blank">{{ $t('newpos.specificReason1') }}</a>
        <span>{{ $t('newpos.specificReason2') }}</span>
      </p>
    </div>
  </div>
</template>

<script>
import { toFixed } from '@/utils/validate';

export default {
  name: 'lastProfits', // 昨日最高年化收益率
  data() {
    return {
      tableData: [],
      language: '',
    }
  },
  components: {},
  props: {
    lastProfitsVisible: {
      type: Boolean,
      default: false
    },
    pool: Object,
    ismax: { // 1-昨日最高年化收益 0-您的昨日年化收益
      type: Number,
      default: 0,
    }
  },
  watch: {
    lastProfitsVisible: function change(val) {
      if (val) {
        this.handlePoolInfo()
      }
    },
    pool: function change() {
      this.handlePoolInfo()
    },
    '$store.state.app.language': function change(val) {
      this.language = val;
    },
  },
  computed: {},
  created() {},
  mounted() {
    this.language = this.$store.state.app.language;
    this.handlePoolInfo()
  },
  beforeDestroy() {},
  methods: {
    handlePoolInfo() {
      const val = this.pool;
      this.tableData = [];
      const item = {
        node: `${((this.ismax ? this.handleToFixed(val.maxNodeAnnualizedRate, 2) : this.handleToFixed(val.nodeAnnualizedRate, 2)) || '0.00')}%`, // 昨日节点年化收益率
        rex: `${((this.ismax ? this.handleToFixed(val.maxRexAnnualizedRate, 2) : this.handleToFixed(val.rexAnnualizedRate, 2)) || '0.00')}%`, // 昨日REX年化收益率,
      }
      this.tableData.push(item)
    },
    // 详细说明
    handleToDetails() {
      const url = {
        'zh-CN': 'https://newdex.zendesk.com/hc/zh-cn/articles/360033535811-EOS%E7%9F%BF%E6%B1%A0%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E',
        'zh-TW': 'https://newdex.zendesk.com/hc/zh-tw/articles/360033535811-EOS%E7%9F%BF%E6%B1%A0%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E',
        en: 'https://newdex.zendesk.com/hc/en-us/articles/360033535811-EOS%E7%9F%BF%E6%B1%A0%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E',
        ko: 'https://newdex.zendesk.com/hc/ko/articles/360033535811-EOS%E7%9F%BF%E6%B1%A0%E8%AF%A6%E7%BB%86%E8%AF%B4%E6%98%8E',
      };
      return url[this.language];
    },
    // 数字截取 - 保留小数
    handleToFixed(num, p) {
      return toFixed(num, p);
    },
  },
}
</script>
<style lang="scss" scoped>
@import '@/views/newpos/public.scss';
.color333 {
  color: #333;
}
.lastProfits{
  .tip {
    margin-top: 15px;
    color: #999;
    a {
      color: #278eda;
    }
  }
}

.theme-1B1D27 {
  .color333 {
    color: #9AB2ED;
  }
}
</style>

